<template>
  <div>
    <el-row type="flex" :gutter="20">
      <el-col :span="6">
        <alarm-card
          :card_icon="'red.png'"
          :card_data="['GAS Station:','Power House:','NH3:', 'WTP:', 'Boider:', 'BTS:']"
          :card_title="'Master Alarm'"
        ></alarm-card>
      </el-col>
      <el-col
        class="one-two-class"
        :span="6"
      >
        <el-row class="el-row-t" type="flex">
          <pcytd-card @card_click="handleCardClick"
            v-model="ytd_data"
            :card_title="'PC YTD'"
          ></pcytd-card>
        </el-row>
        <el-row class="el-row-b" type="flex">
          <by-department-card :card_title="'By Department'"></by-department-card>
        </el-row>
      </el-col>
      <el-col :span="12">
        <pcytd-by-month-card :card_title="'PC YTD by Month'"></pcytd-by-month-card>
      </el-col>
      <!-- <el-col :span="6">
      <slider-bar v-model="value"></slider-bar>
      {{ value }}
      <button @click="fn">修改父组件的值</button>
    </el-col> -->
    </el-row>
    <el-row type="flex" :gutter="20">
      <el-col :span="6">
        <ytd-element-card :card_title="'Packed Volume'" :value="'45,000HL'" :type="1" :card_icon="'packed_volume'"></ytd-element-card>
      </el-col>
      <el-col :span="6">
        <ytd-element-card :card_title="'HEAT'" :value="'66MJ/hl'" :type="2" :card_icon="'heat'"></ytd-element-card>
      </el-col>
      <el-col :span="6">
        <ytd-element-card :card_title="'Water'" :value="'1.8HL/hl'" :type="3" :card_icon="'water'"></ytd-element-card>
      </el-col>
      <el-col :span="6">
        <ytd-element-card :card_title="'Electricity'" :value="'7.5Kwh/hl'" :type="4" :card_icon="'electricity'"></ytd-element-card>
      </el-col>
      <el-col :span="6">
        <ytd-element-card :card_title="'CO2'" :value="'0kg/hl'" :type="5" :card_icon="'co2'"></ytd-element-card>
      </el-col>
      <el-col :span="6">
        <ytd-element-card :card_title="'Air'" :value="'100nM3/hl'" :type="6" :card_icon="'air'"></ytd-element-card>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="20">
      <el-col :span="8">
        <task-list-card :card_title="'Message, Alarm & Events'"></task-list-card>
      </el-col>
      <el-col :span="8">
        <task-list-card :card_title="'To-do List'"></task-list-card>
      </el-col>
      <el-col :span="8">
        <task-list-card :card_title="'Focus news'"></task-list-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import AlarmCard from "@/pages/contents/main/components/AlarmCard";
import pcytdCard from "@/pages/contents/main/components/PC_YTDCard";
const TaskListCard = ()=> import('@/pages/contents/main/components/TaskListCard')
const SliderBar = () => import("@/pages/contents/main/components/SliderBar");
const ByDepartmentCard = () =>
  import("@/pages/contents/main/components/ByDepartmentCard");
const pcytdByMonthCard = ()=> import('@/pages/contents/main/components/PC_YTD_byMonthCard');
const ytdElementCard = ()=> import('@/pages/contents/main/components/YTDElementCard');
export default {
  components: {
    AlarmCard,
    pcytdCard,
    SliderBar,
    ByDepartmentCard,
    pcytdByMonthCard,
    ytdElementCard,
    TaskListCard
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleCardClick() {
      // console.log('click')
      // this.ytd_data.value = this.ytd_data.value + 1;
    }
  },
  data() {
    return {
      isCollapse: false,
      ytd_data: {
        value: 92.12,
        mbasis: "-8.5%",
        wbasis: "+5.3%",
        myear: "+7.6%"
      }
    };
  }
};
</script>
<style scoped>

.el-row {
  margin-bottom: 2%;
  height: 40%;
}
.el-row-t {
  height: 40%;
}
.el-row-b {
  height: 58%;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  /* height: 30%; */
  /* width: 300px; */
  /* margin-right: 20px */
}
</style>

